﻿<UserControl x:Class="Big3.Hitbase.Controls.PictureSearchUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:sr="clr-namespace:Big3.Hitbase.SharedResources;assembly=Big3.Hitbase.SharedResources"
             xmlns:controls="clr-namespace:Big3.Hitbase.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="showStoryboard">
            <DoubleAnimation Storyboard.TargetProperty="Background.Opacity" To="1" Duration="0:0:0.2">
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="hideStoryboard">
            <DoubleAnimation Storyboard.TargetProperty="Background.Opacity" To="0" Duration="0:0:0.2">
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="expandStoryboard">
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
        To="2" Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <BackEase></BackEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" 
        To="2" Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <BackEase></BackEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <!-- This storyboard will make the image revert to its original size -->
        <Storyboard x:Key="shrinkStoryboard">
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
        To="1" Duration="0:0:0.2" />
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" 
        To="1" Duration="0:0:0.2" />
        </Storyboard>

        <ControlTemplate x:Key="PureButton" TargetType="{x:Type Button}">
            <Grid>
                <Grid.Background>
                    <LinearGradientBrush Opacity="0" StartPoint="0,0" EndPoint="0,1">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="#00F8FBFE" Offset="0.0" />
                            <GradientStop Color="#F8FBFE" Offset="0.4" />
                            <GradientStop Color="#E8F2FE" Offset="0.6" />
                            <GradientStop Color="#00E8F2FE" Offset="1" />
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Grid.Background>
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Grid.MouseEnter">
                        <BeginStoryboard Storyboard="{StaticResource showStoryboard}" />
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Grid.MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource hideStoryboard}" />
                    </EventTrigger>
                </Grid.Triggers>
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsKeyboardFocused" Value="true"/>
                <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" Value="#ADADAD"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style TargetType="ListBoxItem" x:Key="MyItemContainerStyle">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Cursor" Value="Hand" />
            <Style.Resources>
                <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0,0" EndPoint="0,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="#F8FBFE" Offset="0" />
                        <GradientStop Color="#E8F2FE" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"></SolidColorBrush>
            </Style.Resources>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Panel.ZIndex" Value="1"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <DataTemplate x:Key="CoverTemplate">
            <Border Name="ItemContainer" CornerRadius="5" BorderThickness="1" BorderBrush="Transparent" Background="Transparent" MouseLeftButtonUp="ItemContainer_MouseLeftButtonUp"
                    TextElement.Foreground="{DynamicResource DefaultForeground}">
                <Grid>
                    <StackPanel Width="100">
                        <Image Margin="0,40,0,0" HorizontalAlignment="Center" Source="{Binding BitmapImage}" Height="80" Width="80" Stretch="Uniform">
                            <Image.Triggers>
                                <EventTrigger RoutedEvent="Image.MouseEnter">
                                    <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
                                </EventTrigger>
                                <EventTrigger RoutedEvent="Image.MouseLeave">
                                    <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
                                </EventTrigger>
                            </Image.Triggers>
                            <Image.RenderTransform>
                                <!-- Initial values we're going to animate -->
                                <ScaleTransform ScaleX="1" ScaleY="1" CenterX="40" CenterY="40"/>
                            </Image.RenderTransform>
                        </Image>
                        <TextBlock Margin="0,20,0,0" HorizontalAlignment="Center" Text="{Binding Title}" TextTrimming="CharacterEllipsis" />
                        <TextBlock HorizontalAlignment="Center" Text="{Binding Size}" TextTrimming="CharacterEllipsis" />
                    </StackPanel>
                    <controls:WaitProgress HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="WaitProgress" WaitProgressColor="Black" Visibility="{Binding Visibility}">

                    </controls:WaitProgress>
                </Grid>
            </Border>
            <DataTemplate.Triggers>
                <Trigger SourceName="ItemContainer" Property="IsMouseOver" Value="True">
                    <Setter TargetName="ItemContainer" Property="Background" >
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#90FFFFFF" Offset="0" />
                                    <GradientStop Color="#30FFFFFF" Offset="1" />
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="ItemContainer" Property="BorderBrush" Value="#400000FF" />
                </Trigger>
            </DataTemplate.Triggers>

        </DataTemplate>
    </UserControl.Resources>
    <Border CornerRadius="5" BorderBrush="Black" BorderThickness="1" Padding="2" Background="{DynamicResource MainBackground}"
            TextElement.Foreground="{DynamicResource DefaultForeground}">

        <Grid>
            <Button Template="{StaticResource PureButton}" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Transparent" Name="ButtonPrev" Click="ButtonPrev_Click">
                <Path Fill="#CFFFFFFF" Stroke="#80000000" Data="M 12 0 L 0 8 L 12 16 L 12 0" ></Path>
            </Button>
            <ListBox ScrollViewer.HorizontalScrollBarVisibility="Hidden" ItemContainerStyle="{StaticResource MyItemContainerStyle}" Background="Transparent"  BorderThickness="0" Margin="20,0,20,0" x:Name="ListBoxCover" ItemTemplate="{StaticResource CoverTemplate}" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Margin="30,0,30,0" IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
            <controls:WaitProgress WaitText="{sr:Loc SearchImage}" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="WaitProgress" WaitProgressColor="Black">

            </controls:WaitProgress>
            <TextBlock Text="{sr:Loc NoImageFound}" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlockNoImageFound" Visibility="Collapsed" />
            <Button Name="ButtonNext" Template="{StaticResource PureButton}" Margin="0,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Stretch" Background="Transparent" Click="ButtonNext_Click">
                <Path Fill="#CFFFFFFF" Stroke="#80000000" Data="M 0 0 L 12 8 L 0 16 L 0 0" ></Path>
            </Button>
            <Image Name="CloseImage" Margin="0,2,2,0" VerticalAlignment="Top" Stretch="none" HorizontalAlignment="Right" Source="/Big3.Hitbase.SharedResources;component/Images/Close.png" MouseLeftButtonUp="Image_MouseLeftButtonUp" MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave" />
            <TextBlock HorizontalAlignment="Right" VerticalAlignment="Bottom">
                <Hyperlink Click="Hyperlink_Click">
                    <Run Text="{sr:Loc More}" />
                </Hyperlink>
            </TextBlock>
        </Grid>
    </Border>
</UserControl>
